<!-- 图片配置 -->
<template>
	<div>
		<el-form-item label="开启旋转">
			<avue-switch v-model="main.activeOption.rotate" :disabled="disabled"></avue-switch>
		</el-form-item>
		<el-form-item label="透明度">
			<el-slider v-model="main.activeOption.opacity" :disabled="disabled" :max="1" :step="0.1"></el-slider>
		</el-form-item>
		<template v-if="main.activeOption.rotate">
			<el-form-item label="旋转时间">
				<avue-input-number v-model="main.activeOption.duration" :disabled="disabled"></avue-input-number>
			</el-form-item>
		</template>
		<el-form-item label="展示方式">
			<avue-select v-model="main.activeOption.imgDisplayMode" :disabled="disabled" :dic="dicOption.imgDisplayMode"> </avue-select>
		</el-form-item>
		<el-form-item label="图片地址">
			<img v-if="main.activeObj.data.value" :src="main.activeObj.data.value" alt="" width="100%" height="220px" style="object-fit: scale-down" />
			<el-input v-model="main.activeObj.data.value" :disabled="disabled">
				<div @click="main.handleOpenImg('activeObj.data.value')" slot="append">
					<i class="iconfont icon-img"></i>
				</div>
			</el-input>
		</el-form-item>
		<el-form-item label="默认图片">
			<el-input v-model="main.activeOption.defaultImgValue" :disabled="disabled"> </el-input>
		</el-form-item>
	</div>
</template>

<script>
import { dicOption } from '@/option/config';
export default {
	name: 'img',
	inject: ['main', 'contain'],
	data() {
		return {
			dicOption: dicOption,
			disabled: this.contain.activeObj.isLock
		};
	}
};
</script>

<style></style>
